import React, { Component } from 'react'


import { withRouter } from 'react-router-dom'

import propTypes from 'prop-types'

import { Flex, } from 'antd-mobile';

import './index.scss'

class index extends Component {

    render() {
        return (
            <Flex className={['search-box', this.props.className || ''].join(' ')}>
                {/* 左侧白色区域 */}
                <Flex className="search">
                    {/* 位置 */}
                    <div className="location" onClick={() => this.props.history.push('/citylist')} >
                        <span className="name">{this.props.cityName}</span>
                        <i className="iconfont icon-arrow" />
                    </div>

                    {/* 搜索表单 */}
                    <div className="form" onClick={() => this.props.history.push('/search')}>
                        <i className="iconfont icon-seach" />
                        <span className="text">请输入小区或地址</span>
                    </div>
                </Flex>
                {/* 右侧地图图标 */}
                <i className="iconfont icon-map" onClick={() => this.props.history.push('/map')} />
            </Flex>
        )
    }
}

index.propTypes = {
    cityName: propTypes.string.isRequired
}

export default withRouter(index)
